<!--
 * @Author: caozaihui 15908754730@163.com
 * @Date: 2024-06-26 14:03:14
 * @LastEditors: czh 2119294696@qq.com
 * @LastEditTime: 2024-07-03 12:42:48
 * @FilePath: \YMU_forum_vue\src\views\Home\components\blurb\blurb.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-carousel :interval="3000" type="card" height="30vw" loop v-if="isPC">
    <el-carousel-item v-for="(item) in imgUrl" class="item" :style="{ backgroundImage: 'url(' + item.url + ')' }">
      <div style="display: flex; flex-direction: column; justify-content: end; height: 80%;width: 90%;margin: 0 auto;">
        <div class="title">{{ item.titel }}</div>
        <div class="content">{{ item.content }}</div>
      </div>
    </el-carousel-item>
  </el-carousel>
  <!-- 手机端 -->
  <div class="headImgBox load-fade" :style="bgStyle" v-else>

  </div>
</template>
<script setup>
const isPC = ref(true)
import { onMounted, ref, computed, onUnmounted } from 'vue';
const imgUrl = [
  {
    url: '/img/head1.jpg',
    titel: '欢迎你！',
    content: '这里是交流的天地'
  },
  {
    url: '/img/head2.jpg',
    titel: '千般荒凉，以此为梦',
    content: '我们总是在得到一样东西的同时，又渴望着另一样。然而，得到的往往不懂得珍惜，得不到的却又心生苦恼。'
  },
  {
    url: '/img/head3.jpg',
    titel: '万里蹀躞，以此为归',
    content: '我们争不过岁月，也跑不过时间。唯有以自己喜欢的方式，去度过每一个日出日落。'
  }
]
const imgUrl2 = ref([
  {
    url: '/img/phone1.jpg',
    titel: '欢迎你！',
    content: '这里是交流的天地'
  },
  {
    url: '/img/phone2.jpg',
    titel: '千般荒凉，以此为梦',
    content: '我们总是在得到一样东西的同时，又渴望着另一样。然而，得到的往往不懂得珍惜，得不到的却又心生苦恼。'
  },
  {
    url: '/img/phone3.jpeg',
    titel: '万里蹀躞，以此为归',
    content: '我们争不过岁月，也跑不过时间。唯有以自己喜欢的方式，去度过每一个日出日落。'
  }
])
onMounted(() => {
  startAnimation();
  if (window.innerWidth < 800) {
    isPC.value = false
  }
})
const scale = ref(1)
const animationInterval = ref('')
const currentImageIndex = ref(0)
const startAnimation = () => {
  if (window.innerWidth < 500) {
    scale.value = 1.3
    animationInterval.value = setInterval(() => {
      // 放大背景图片
      scale.value += 0.002;
      if (scale.value > 2) { // 假设放大到2.5倍后更换图片  
        scale.value = 1.3; // 重置缩放值到初始值（或你想要的任何值）  
        currentImageIndex.value = (currentImageIndex.value + 1) % imgUrl2.value.length; // 更换图片  
      }
    }, 15);
  }
}
onUnmounted(() => {
  if (animationInterval||!isPC) {
    clearInterval(animationInterval);
    animationInterval.value = null;
  }
});
const bgStyle = computed(() => {
  return {
    backgroundImage: `url(${imgUrl2.value[currentImageIndex.value].url})`,
    backgroundSize: `${scale.value * 100}%`,
    backgroundPosition: 'center',
    backgroundRepeat: 'no-repeat',
  };
});  
</script>
<style scoped>
.item {
  background-size: cover;
  background-position: center;
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.content,
.title {
  color: white;
  font-size: 1.2rem;
  margin-top: 1vw
}

.title {
  font-size: 2rem;
}

.headImgBox {
  height: 95vh;
  position: relative;
  width: 100%;
  background-size: cover;
  background-position: center 50%;
  background-repeat: no-repeat;
  margin-bottom: 50px;
}

.headImgBox .scene {
  width: 100%;
  /*height:300px;*/
  text-align: center;
  font-size: 100px;
  font-weight: 200;
  color: #fff;
  position: absolute;
  left: 0;
  top: 160px;
  font-family: 'Sigmar One', Arial;
  text-shadow: 0 2px 2px #47456d;

}

.headImgBox .scene span {
  transform: matrix(1, 0, 0, 1, 0, 0);
  -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
  text-shadow: 1px 1px 0 #ff3f1a, -1px -1px 0 #00a7e0;
}
</style>